<template>
  <div class="dragbox">
    <!-- <el-divider content-position="center">工单生产过程</el-divider> -->
    <div>
      <el-button type="primary" class="button" @click="createStep">创建新步骤</el-button>
    </div>
    <!--生产步骤明细-->
    <el-table :data="tableDatas" border style="width: 100%" row-key="id">
      <el-table-column prop="step" label="步骤" width="60">
        <template #default="scope">
          {{ scope.row.carTechnologyDetail.sort }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          {{ productionOrderStepStatusDict ? dictToMap(productionOrderStepStatusDict).get(scope.row.status) : scope.row.status }}
        </template>
      </el-table-column>
      <el-table-column prop="materialName" label="物料" width="150">
        <template #default="scope">
          {{ scope.row.carTechnologyDetail.material.name }}
        </template>
      </el-table-column>
      <el-table-column prop="materialBatchName" label="物料批次" width="150">
        <template #default="scope">
          {{ scope.row.materialBatch ? scope.row.materialBatch.batchNumber : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="quantity" label="计划用量" width="60">
        <template #default="scope">
          {{ scope.row.carTechnologyDetail.quantity }}
        </template>
      </el-table-column>
      <el-table-column prop="actualQuantity" label="实际用量" width="60" />
      <el-table-column prop="operatorName" label="操作员" width="100">
        <template #default="scope">
          {{ scope.row.operator ? scope.row.operator.nickName : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间" width="100"></el-table-column>
      <el-table-column prop="endTime" label="完成时间" width="100"></el-table-column>
      <el-table-column prop="auditorName" label="审核员" width="100">
        <template #default="scope">
          {{ scope.row.auditor ? scope.row.auditor.nickName : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="auditTime" label="审核时间" width="100"></el-table-column>
      <el-table-column prop="auditResult" label="审核结果" width="100">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.auditResult">通过</el-tag>
          <el-tag type="danger" v-else-if="scope.row.auditResult == false">不通过</el-tag>
          <template v-else></template>
        </template>
      </el-table-column>
      <el-table-column prop="auditNote" label="审核意见" width="150"> </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-dropdown
            v-if="scope.row.status !== 'audit_passed'"
            placement="bottom-start"
            @command="handleOrderStatus($event, scope.row)"
            style="margin-left: 10px; margin-top: 1px"
          >
            <el-button type="primary" size="small" icon="Grid" plain>操作菜单</el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-if="scope.row.status == 'pending'" command="beginWork">开始生产</el-dropdown-item>
                <el-dropdown-item v-if="scope.row.status == 'in_progress'" command="completedWork">完成生产</el-dropdown-item>
                <el-dropdown-item v-if="scope.row.status == 'completed'" command="audit">审核</el-dropdown-item>
                <el-dropdown-item v-if="scope.row.status == 'audit_failed'" command="beginWork">重新生产</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!--生产步骤操作对话框-->
    <ProductionOrderStepOperatorDialog ref="productionOrderStepOperatorDialogRef" @afterSubmitSuccess="afterChangeStepStatus" />
    <!--生产步骤审核对话框-->
    <!-- <ProductionOrderStepAuditDialog ref="productionOrderStepAuditDialogRef" @afterSubmitSuccess="afterChangeStepStatus" /> -->
  </div>
</template>

<script setup lang="ts">
//导入拖拽插件
// import draggable from 'vuedraggable';
import MaterialSelectDialogComponent from '@/components/mes/MaterialSelectDialogComponent.vue';
import ProductionOrderStepOperatorDialog from '@/views/page/mes/productionorder/ProductionOrderStepOperatorDialog.vue';
import ProductionOrderStepAuditDialog from '@/views/page/mes/productionorder/ProductionOrderStepAuditDialog已经废弃.vue';
import urls from '@/api/request/urls';
import type { CarTechnologyDetail, Material, ProductionOrderStep } from '@/types/interface/mes_interface';
import { nextTick, onMounted, ref } from 'vue';
import Request from '@/api/request/request';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getDict } from '@/api/dict';
import { yesOrNoDict, dictToMap, type Option } from '@/api/dict';
const emit = defineEmits(['selectSeat', 'afterOperateProductionOrderStepSuccess']);

// 接收父容器参数
interface Props {
  orderId: string; // 表单的处理类型，post表示提交，put表示编辑
}
const props = withDefaults(defineProps<Props>(), {});

//定义字典
const productionOrderStepStatusDict = ref<Option[]>();
onMounted(async () => {
  //给字典赋值
  productionOrderStepStatusDict.value = await getDict('汽车生产订单步骤状态', 'string');
});
//工艺明细模块===============================================================
//接收父组件表单的生产工单步骤列表
const tableDatas = defineModel<ProductionOrderStep[]>({
  required: false,
  default: []
});
//刷新生产步骤表格的数据
const loadSteps = async () => {
  const resData: any = await new Request(`${urls.API_URL_BACKSTAGE_MES_PRODUCTIONORDER}/${props.orderId}`).get();
  if (resData.success) {
    tableDatas.value = resData.data.steps;
  }
};
//生产步骤操作对话框
const productionOrderStepOperatorDialogRef = ref();
//创建新步骤
const createStep = async () => {
  //拼接要传递的表单对象
  const formObject = {
    productionOrder: {
      id: props.orderId
    }
  };
  const resData: any = await new Request(urls.API_URL_BACKSTAGE_MES_PRODUCTIONORDERSTEP, JSON.stringify(formObject)).post();
  if (resData.success) {
    //如果创建成功
    //重新读取生产步骤的表格记录
    await loadSteps();
  }
};
//开始生产，即将生产订单的步骤改为生产中状态
const beginWork = async (productionOrderStepId: string) => {
  const resData: any = await new Request(`${urls.API_URL_BACKSTAGE_MES_PRODUCTIONORDERSTEP}/inProgress/${productionOrderStepId}`).patch();
  if (resData.success) {
    //重新读取生产步骤的表格记录
    await loadSteps();
  }
};
//生产完成后
const afterChangeStepStatus = async () => {
  //表单成交提供后的回调
  //重新读取生产步骤的表格记录
  await loadSteps();
  //暴露给父组件
  emit('afterOperateProductionOrderStepSuccess');
};
//操作订单下拉框
const handleOrderStatus = async (command: string | number | object, productionOrderStep: ProductionOrderStep) => {
  if (command == 'beginWork') {
    //开始生产
    beginWork(productionOrderStep.id!);
  } else if (command == 'completedWork') {
    //完成生产
    productionOrderStepOperatorDialogRef.value.openDialog(productionOrderStep.id, 1);
  } else if (command == 'audit') {
    //完成生产
    productionOrderStepOperatorDialogRef.value.openDialog(productionOrderStep.id, 2);
  }
  // 读取修改订单状态
  // const resData: any = await new Request(`${urls.API_URL_BACKSTAGE_SHOP_CARORDER}/${carOrder.id}/status`, null, {
  //   params: { targetStatus: command }
  // }).patch();
  // if (resData.success) {
  //   loadTableList();
  // }
};
</script>

<style scoped></style>
